<template>
	<view>
		<view style="padding: 20rpx;">
			<view style="display: flex;">
				<view style="width: 100%;">
					<u-search shape="square" :show-action="false" placeholder="输入城市名或拼音查询" v-model="keyword"
						@change="searchchange">
					</u-search>
				
				</view>
				
			</view>
			<u-sticky offset-top="200">
				<view>
					<view v-for="(search,a ) in searchlist" :key="a">
						<u-cell-item :title="search.name" @click="setcity(search)"></u-cell-item>
					</view>
				</view>
			
			</u-sticky>
		</view>



		<u-index-list :scrollTop="scrollTop" active-color="#EA5344" :index-list="indexList" v-show="keyword ==''">

			<view v-for="(item, index) in list" :key="index">
				<u-index-anchor :index="item.Letter" :custom-style="customStyle" />
				<view v-if="index >= 3">
					<view class="list-cell u-border-bottom" style="margin-top: 15rpx 15rpx;"
						v-for="(item1, a) in item.data" :key="a" @click="setcity(item1)">

						{{item1.name}}
					</view>
				</view>
				<view v-else style="background-color: #F5F5F5; ">
					<view class="list-cell1" style="display: flex;flex-wrap: wrap;">
						<view style="display: flex;" v-if="index <=1" v-for="(item2, i) in item.data" :key="i"
							@click="setcity(item2)">
							<view style="padding:15rpx 0rpx;width: 100%; background-color: #F5F5F5;" v-if="index<=1">
								<text
									style="padding:10rpx  50rpx;border: 1px solid #d4d4d4;background-color: #FFFFFF;">{{item2.name}}</text>
							</view>
							
						</view>
						<view style="width: 150rpx;margin:10rpx 40rpx 10rpx 0rpx; background-color: #F5F5F5;" v-if="index >1"
							v-for="(item2, i) in item.data" :key="i" @click="setcity(item2)">
							<view class="cityBtu" v-if="index >1">
								<view style="margin-left:55rpx;mbackground-color: #FFFFFF;">
									{{item2.name}}
								</view>
							</view>
							<view style="padding:5rpx 0rpx;width: 100%;background-color: #F5F5F5;" v-if="index<=1">
								<text style="padding:10rpx  50rpx;border: 1px solid #d4d4d4; ">{{item2.name}}</text>
							</view>
						</view>
						

					</view>
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import Config from '../../common/config.js';
	import PinyinUtils from '../../common/pingyinUtils.js'
	export default {
		data() {
			return {
				customStyle: {

					color: '#000000',
					backgroundColor: '#EBEBEB',

				},
				searchlist: [],
				keyword: "",
				indexList: ["当前选择", "GPS定位", "热门城市", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N",
					"O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
				],
				scrollTop: 0,
				location: {},
				list: [{
						data: [{
							name: "暂无",
							cityId: "0"
						}],
						Letter: "当前选择"
					},
					{
						data: [{
							name: "暂无",
							cityId: "0"
						}],
						Letter: "GPS定位"
					},
					{
						data: [{
								name: "北京",
								cityId: "1"
							}, {
								name: "上海",
								cityId: "2"
							},
							{
								name: "广州",
								cityId: "4"
							},
							{
								name: "深圳",
								cityId: "3"
							},
							{
								name: "西安",
								cityId: "12"
							},
							{
								name: "天津",
								cityId: "8"
							},
							{
								name: "重庆",
								cityId: "9"
							},
							{
								name: "杭州",
								cityId: "6"
							},
							{
								name: "南京",
								cityId: "17"
							},
							{
								name: "成都",
								cityId: "16"
							},
							{
								name: "武汉",
								cityId: "5"
							},
							{
								name: "长沙",
								cityId: "75"
							}
						],
						Letter: "热门城市"
					}
				]
			}
		},
		onShow() {

			this.location = Config.loaction;
			if (this.location.cityId == "0") {
				this.getLocation()
			} else {
				this.list[0].data[0] = this.location

				this.list[1].data[0] = Config.dwloaction;

				this.getLocation()
			}

		},
		onLoad() {
			this.GetCityList()
			this.location = Config.loaction;
			if (this.location.cityId == "0") {
				this.getLocation()
			} else {
				this.list[0].data[0] = this.location

				this.list[1].data[0] = Config.dwloaction;

				this.getLocation()
			}

		},
		methods: {
			getCityInfo(location) {
				console.log('a')
				let that = this;
				uni.request({
					url: "https://restapi.amap.com/v3/geocode/regeo",
					data: {
						key: "669ef225c5dd9ad11f7ab2d6f9c7e7b5",
						location: location
					},
					success: (res) => {

						let city = res.data.regeocode.addressComponent.city;
						if (city.toString() === '') {
							city = res.data.regeocode.addressComponent.province
						}

						city = city.replace('市', "")
						for (var i = 0; i < Config.data.length; i++) {
							for (var j = 0; j < Config.data[i].data.length; j++) {

								if (Config.data[i].data[j].name.indexOf(city) > -1) {

									let a = {
										name: city,
										cityId: Config.data[i].data[j].cityId
									}
									console.log(a)
									Config.dwloaction = a;
									that.list[1].data[0] = a;
									if (Config.loaction.name === "暂无" || Config.loaction.name === undefined) {
										Config.loaction = a;
										that.Location = a;
										uni.setStorageSync("location", a)
									}
									that.cityId = Config.loaction.cityId;
									that.location = Config.loaction;
									that.list[0].data[0] = Config.loaction

									return
								}
							}
						}
					}
				})
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						Config.lat = res.latitude;
						Config.lon = res.longitude;
						console.log(res.longitude + "," + res.latitude)
						that.getCityInfo(res.longitude + "," + res.latitude)
					},
					fail(ress) {
						wx.getSetting({
							success: (res) => {
								if (res.authSetting['scope.userLocation']) {
									that.getUserPosition((res, flag) => {
										// console.log(res, flag);
										if (flag.flag) {
											fn(res)
										}
									});
								} else {
									//如果未授权  打开弹窗
									wx.showModal({
										title: '请授权位置权限',
										showCancel: false,
										cancelColor: 'cancelColor',
										success: () => {
											wx.openSetting({
												complete: (res) => {
													uni.navigateTo({

														url: '/pages/location/location'

													});
												},
											})
										}
									})
								}
							}
						})
					}
				});


			},
			searchchange() {
				//this.searchlist =[]

				let keystr = this.keyword
				keystr = keystr.toUpperCase()
				if (keystr != "") {

					for (var i = 0; i < this.list.length; i++) {
						for (var j = 0; j < this.list[i].data.length; j++) {
							let name = this.list[i].data[j].name + '';
							let namepy = PinyinUtils.chineseToPinYin(name) + ''
							namepy = namepy.toUpperCase()

							if (name.indexOf(keystr) != -1 || namepy.indexOf(keystr) != -1) {
								let have = false
								for (var k = 0; k < this.searchlist.length; k++) {
									if (this.list[i].data[j].cityId == this.searchlist[k].cityId) {
										have = true
										break
									}
								}
								if (!have) {
									this.searchlist.push(this.list[i].data[j])
								}

							}
						}

					}

				} else {
					this.searchlist = []
				}

			},
			setcity(item) {

				Config.loaction = item;
				this.location = item;
				this.list[0].data[0] = item
				uni.setStorageSync("location", item)
				uni.navigateBack({
					delta: 1
				})
				// uni.reLaunch({
				// 	url: '/pages/index/index'
				// });

			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;

			},
			GetCityList() {

				for (var i = 0; i < Config.data.length; i++) {
					this.list.push(Config.data[i]);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.cityBtu {
		width: 165rpx;
		height: 65rpx;
		background-color: #FFFFFF;
		color: #000000;
		border: 1px solid #d4d4d4;
		margin-top: 10rpx;
		
		display: flex;
		align-items: center;
		text-align: center;
	}

	.list-cell1 {

		box-sizing: border-box;

		width: 85%;
		padding: 30rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #F5F5F5;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #ffffff;
	}
</style>
